<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/layer/3.0.1/skin/default/layer.min.css">
	<link rel="stylesheet" href="../../../layui/css/layui.css">
	<link rel="stylesheet" href="../../../css/byking.css">
	<link rel="stylesheet" href="../../../css/jquery.mloading.css">
	
</head>
<body>
	<section>
		<div _tree="departmentTree" id="departmentTree">
			<div class="byking-panel-head">
				<div class="byking-panel-left">
					<i class="fa fa-edit"></i><font>加入部门</font>
				</div>
				<div class="byking-panel-right">
					<div class="byking-buts">
						<button onclick="chooseDep()"
						        class="btn btn-default fa fa-cog" 
						        data-toggle="tooltip" 
						        data-original-title="菜单授权"></button>
					</div>
				</div>
			</div>
			<div>
				<ul class="byking-tree" id="byking-tree">
					<li v-for="(index, item) in page" id="{{item.guid}}" class="{{item.clazz}}"  v-bind:data-tt-parent-id="item.parent_guid" v-show="item.level==1" @click="selectItem(item,$event)">
						<div style="{{'padding-left:'+ (item.level*15) + 'px'}}">
							<input type="checkbox" value="{{item.guid}}" _name="{{item.name}}"/>
							<i v-if="!item.isLeaf"  class="fa fa-folder-o" @click="expand(item,$event)"></i>
							<i v-else  class="fa fa-file-o"></i>
							<font>{{item.name}}</font>
						</div>
					</li>
				</ul>
			</div>
			
		</div>
	</section>

	<!-- jQuery -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- jquery.cookie -->
	<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<!-- layer -->
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<!-- vue -->
	<script src="http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js"></script>
	<script src="../../../js/jquery.mloading.js"></script>
	<script src="../../../layui/layui.js"></script>
	<script src="../../../js/byking.js"></script>
	<script src="../../../js/hostconfig.js"></script>
	<script src="../../../js/byking-tree.js"></script>
	
	<script type="text/javascript">
	
	var top_dep_guid = $byking.getUrlParam("top_dep_guid");
	
	$tree.addTree($hostconfig.sysAuthHost+"/department/query?user_guid="+$byking.getCookieValue("user_guid")+"&top_dep_id="+top_dep_guid,"#departmentTree",function(item,e){
		
	}, true, "#departmentTree");
	
	function chooseDep(){
		if ($(":checked").length == 0) {
			layer.msg("没有选择部门！");
			return;
		}
		
		var selectedIds = [];
		
		$(":checked").each(function() {
			var obj = {};
			obj.guid = $(this).attr("value");
			obj.name = $(this).attr("_name");
			selectedIds.push(obj);
		});
		
		var index = parent.layer.getFrameIndex(window.name);
		parent.setDepartment(selectedIds);
		parent.layer.close(index);
		//layer.msg(JSON.stringify(selectedIds));
	}
	</script>
	
</body>
</html>